import React from 'react';

class ListDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          id: 'id-1',
          title: '标题1'
        },
        {
          id: 'id-2',
          title: '标题2'
        },
        {
          id: 'id-3',
          title: '标题3'
        }
      ]
    }
  }
  render() {
    return (
      <div>
        <h4>1. 列表渲染</h4>
        <ul>
          { /* vue v-for */
            this.state.list.map(
              (item, index) => {
                // 这里的 key 和 Vue 的 key 类似，必填，不能是 index 或 random
                return <li key={item.id}>
                  index {index}; id {item.id}; title {item.title}
                </li>
              }
            )
          }
        </ul>
      </div>
    )
  }
}

export default ListDemo;
